<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- <script src="jquery.min.js"></script> -->
  <title>Document</title>
  <style>
    .choose_btn{
      float: left;
      height: 50px;
      width: 14%;
      background-color: aqua;
      text-align: center;
      line-height: 50px;
      border: solid 1px black;
    }
    .choose_btn:hover{
      background-color: rgb(136, 255, 0);
    }
  </style>
</head>
<body>
    
  <div class="container" style="width: 60%;margin-left: 20%;background-color: rgb(236, 233, 233);">
    <div class="bnt_div">
        <div id="choosed" style="display: none"></div>
        <div id="bnt_can"  class="choose_btn" onclick="choose(this)">特码<div style="display: none">{$code.0.num},{$code.1.num},{$code.2.num},{$code.3.num},{$code.4.num},{$code.5.num}</div></div>
        <div id="bnt_can1" class="choose_btn" onclick="choose(this)">平码1<div style="display: none">{$code.0.num1},{$code.1.num1},{$code.2.num1},{$code.3.num1},{$code.4.num1},{$code.5.num1}</div></div>
        <div id="bnt_can2" class="choose_btn" onclick="choose(this)">平码2<div style="display: none">{$code.0.num2},{$code.1.num2},{$code.2.num2},{$code.3.num2},{$code.4.num2},{$code.5.num2}</div></div>
        <div id="bnt_can3" class="choose_btn" onclick="choose(this)">平码3<div style="display: none">{$code.0.num3},{$code.1.num3},{$code.2.num3},{$code.3.num3},{$code.4.num3},{$code.5.num3}</div></div>
        <div id="bnt_can4" class="choose_btn" onclick="choose(this)">平码4<div style="display: none">{$code.0.num4},{$code.1.num4},{$code.2.num4},{$code.3.num4},{$code.4.num4},{$code.5.num4}</div></div>
        <div id="bnt_can5" class="choose_btn" onclick="choose(this)">平码5<div style="display: none">{$code.0.num5},{$code.1.num5},{$code.2.num5},{$code.3.num5},{$code.4.num5},{$code.5.num5}</div></div>
        <div id="bnt_can6" class="choose_btn" onclick="choose(this)">平码6<div style="display: none">{$code.0.num6},{$code.1.num6},{$code.2.num6},{$code.3.num6},{$code.4.num6},{$code.5.num6}</div></div>
    </div>
    <!-- 画布 -->
    <div>
    <canvas id="can" width="800" height="350" ></canvas>
    <canvas id="can1" width="800" height="350" style="display: none;" ></canvas>
    <canvas id="can2" width="800" height="350" style="display: none;" ></canvas>
    <canvas id="can3" width="800" height="350" style="display: none;" ></canvas>
    <canvas id="can4" width="800" height="350" style="display: none;" ></canvas>
    <canvas id="can5" width="800" height="350" style="display: none;" ></canvas>
    <canvas id="can6" width="800" height="350" style="display: none;" ></canvas>
    </div>
    <!-- 画布 -->
  </div> 
</body>
    <script type="text/javascript">  
            //特码
            var proportion_y=5;  //纵坐标比例
            var proportion_x=50; //横坐标比例
            var num_x=15; //横坐标刻度
            var num_y=50; //纵坐标刻度
            
            var can = document.getElementById("can");  
            var ctx = can.getContext("2d");  
            var bar_color =["{$data_arr.0.num.bs}","{$data_arr.1.num.bs}","{$data_arr.2.num.bs}","{$data_arr.3.num.bs}","{$data_arr.4.num.bs}","{$data_arr.5.num.bs}","{$data_arr.6.num.bs}","{$data_arr.7.num.bs}","{$data_arr.8.num.bs}","{$data_arr.9.num.bs}","{$data_arr.10.num.bs}","{$data_arr.11.num.bs}","{$data_arr.12.num.bs}","{$data_arr.13.num.bs}","{$data_arr.14.num.bs}"]; 
            nums = [{$code.0.num},{$code.1.num},{$code.2.num},{$code.3.num},{$code.4.num},{$code.5.num},{$code.6.num},{$code.7.num},{$code.8.num},{$code.9.num},{$code.10.num},{$code.11.num},{$code.12.num},{$code.13.num},{$code.14.num}];  
            datas = ["{$code.14.period}期","{$code.13.period}期","{$code.12.period}期","{$code.11.period}期","{$code.10.period}期","{$code.9.period}期","{$code.8.period}期","{$code.7.period}期","{$code.6.period}期","{$code.5.period}期","{$code.4.period}期","{$code.3.period}期","{$code.2.period}期","{$code.1.period}期","{$code.0.period}期"];  
            drawBorder();  
            drawLine();  
            drawBlock(bar_color); 

            //平码1
            var can1 = document.getElementById("can1"); 
            var ctx = can1.getContext("2d");  
            var bar_color1 =["{$data_arr.0.num1.bs}","{$data_arr.1.num1.bs}","{$data_arr.2.num1.bs}","{$data_arr.3.num1.bs}","{$data_arr.4.num1.bs}","{$data_arr.5.num1.bs}","{$data_arr.6.num1.bs}","{$data_arr.7.num1.bs}","{$data_arr.8.num1.bs}","{$data_arr.9.num1.bs}","{$data_arr.10.num1.bs}","{$data_arr.11.num1.bs}","{$data_arr.12.num1.bs}","{$data_arr.13.num1.bs}","{$data_arr.14.num1.bs}"]; 
            nums = [{$code.0.num1},{$code.1.num1},{$code.2.num1},{$code.3.num1},{$code.4.num1},{$code.5.num1},{$code.6.num1},{$code.7.num1},{$code.8.num1},{$code.9.num1},{$code.10.num1},{$code.11.num1},{$code.12.num1},{$code.13.num1},{$code.14.num1}];  
            datas = ["{$code.14.period}期","{$code.13.period}期","{$code.12.period}期","{$code.11.period}期","{$code.10.period}期","{$code.9.period}期","{$code.8.period}期","{$code.7.period}期","{$code.6.period}期","{$code.5.period}期","{$code.4.period}期","{$code.3.period}期","{$code.2.period}期","{$code.1.period}期","{$code.0.period}期"];  
            drawBorder();  
            drawLine();  
            drawBlock(bar_color1); 
            //平码2
            var can2 = document.getElementById("can2");  
            var ctx = can2.getContext("2d"); 
            var bar_color2 =["{$data_arr.0.num2.bs}","{$data_arr.1.num2.bs}","{$data_arr.2.num2.bs}","{$data_arr.3.num2.bs}","{$data_arr.4.num2.bs}","{$data_arr.5.num2.bs}","{$data_arr.6.num2.bs}","{$data_arr.7.num2.bs}","{$data_arr.8.num2.bs}","{$data_arr.9.num2.bs}","{$data_arr.10.num2.bs}","{$data_arr.11.num2.bs}","{$data_arr.12.num2.bs}","{$data_arr.13.num2.bs}","{$data_arr.14.num2.bs}"];  
            nums = [{$code.0.num2},{$code.1.num2},{$code.2.num2},{$code.3.num2},{$code.4.num2},{$code.5.num2},{$code.6.num2},{$code.7.num2},{$code.8.num2},{$code.9.num2},{$code.10.num2},{$code.11.num2},{$code.12.num2},{$code.13.num2},{$code.14.num2}];  
            datas = ["{$code.14.period}期","{$code.13.period}期","{$code.12.period}期","{$code.11.period}期","{$code.10.period}期","{$code.9.period}期","{$code.8.period}期","{$code.7.period}期","{$code.6.period}期","{$code.5.period}期","{$code.4.period}期","{$code.3.period}期","{$code.2.period}期","{$code.1.period}期","{$code.0.period}期"];  
            drawBorder();  
            drawLine();  
            drawBlock(bar_color2); 
            //平码3
            var can3 = document.getElementById("can3");  
            var ctx = can3.getContext("2d");  
            var bar_color3 =["{$data_arr.0.num3.bs}","{$data_arr.1.num3.bs}","{$data_arr.2.num3.bs}","{$data_arr.3.num3.bs}","{$data_arr.4.num3.bs}","{$data_arr.5.num3.bs}","{$data_arr.6.num3.bs}","{$data_arr.7.num3.bs}","{$data_arr.8.num3.bs}","{$data_arr.9.num3.bs}","{$data_arr.10.num3.bs}","{$data_arr.11.num3.bs}","{$data_arr.12.num3.bs}","{$data_arr.13.num3.bs}","{$data_arr.14.num3.bs}"]; 
            nums = [{$code.0.num3},{$code.1.num3},{$code.2.num3},{$code.3.num3},{$code.4.num3},{$code.5.num3},{$code.6.num3},{$code.7.num3},{$code.8.num3},{$code.9.num3},{$code.10.num3},{$code.11.num3},{$code.12.num3},{$code.13.num3},{$code.14.num3}];  
            datas = ["{$code.14.period}期","{$code.13.period}期","{$code.12.period}期","{$code.11.period}期","{$code.10.period}期","{$code.9.period}期","{$code.8.period}期","{$code.7.period}期","{$code.6.period}期","{$code.5.period}期","{$code.4.period}期","{$code.3.period}期","{$code.2.period}期","{$code.1.period}期","{$code.0.period}期"];  
            drawBorder();  
            drawLine();  
            drawBlock(bar_color3); 
            //平码4
            var can4 = document.getElementById("can4");  
            var ctx = can4.getContext("2d"); 
            var bar_color4 =["{$data_arr.0.num4.bs}","{$data_arr.1.num4.bs}","{$data_arr.2.num4.bs}","{$data_arr.3.num4.bs}","{$data_arr.4.num4.bs}","{$data_arr.5.num4.bs}","{$data_arr.6.num4.bs}","{$data_arr.7.num4.bs}","{$data_arr.8.num4.bs}","{$data_arr.9.num4.bs}","{$data_arr.10.num4.bs}","{$data_arr.11.num4.bs}","{$data_arr.12.num4.bs}","{$data_arr.13.num4.bs}","{$data_arr.14.num4.bs}"];  
            nums = [{$code.0.num4},{$code.1.num4},{$code.2.num4},{$code.3.num4},{$code.4.num4},{$code.5.num4},{$code.6.num4},{$code.7.num4},{$code.8.num4},{$code.9.num4},{$code.10.num4},{$code.11.num4},{$code.12.num4},{$code.13.num4},{$code.14.num4}];  
            datas = ["{$code.14.period}期","{$code.13.period}期","{$code.12.period}期","{$code.11.period}期","{$code.10.period}期","{$code.9.period}期","{$code.8.period}期","{$code.7.period}期","{$code.6.period}期","{$code.5.period}期","{$code.4.period}期","{$code.3.period}期","{$code.2.period}期","{$code.1.period}期","{$code.0.period}期"];  
            drawBorder();  
            drawLine();  
            drawBlock(bar_color4); 
            //平码5
            var can5 = document.getElementById("can5");  
            var ctx = can5.getContext("2d");
            var bar_color5 =["{$data_arr.0.num5.bs}","{$data_arr.1.num5.bs}","{$data_arr.2.num5.bs}","{$data_arr.3.num5.bs}","{$data_arr.4.num5.bs}","{$data_arr.5.num5.bs}","{$data_arr.6.num5.bs}","{$data_arr.7.num5.bs}","{$data_arr.8.num5.bs}","{$data_arr.9.num5.bs}","{$data_arr.10.num5.bs}","{$data_arr.11.num5.bs}","{$data_arr.12.num5.bs}","{$data_arr.13.num5.bs}","{$data_arr.14.num5.bs}"];   
            nums = [{$code.0.num5},{$code.1.num5},{$code.2.num5},{$code.3.num5},{$code.4.num5},{$code.5.num5},{$code.6.num5},{$code.7.num5},{$code.8.num5},{$code.9.num5},{$code.10.num5},{$code.11.num5},{$code.12.num5},{$code.13.num5},{$code.14.num5}];  
            datas = ["{$code.14.period}期","{$code.13.period}期","{$code.12.period}期","{$code.11.period}期","{$code.10.period}期","{$code.9.period}期","{$code.8.period}期","{$code.7.period}期","{$code.6.period}期","{$code.5.period}期","{$code.4.period}期","{$code.3.period}期","{$code.2.period}期","{$code.1.period}期","{$code.0.period}期"];  
            drawBorder();  
            drawLine();  
            drawBlock(bar_color5); 
            //平码6
            var can6 = document.getElementById("can6");  
            var ctx = can6.getContext("2d");
            var bar_color6 =["{$data_arr.0.num6.bs}","{$data_arr.1.num6.bs}","{$data_arr.2.num6.bs}","{$data_arr.3.num6.bs}","{$data_arr.4.num6.bs}","{$data_arr.5.num6.bs}","{$data_arr.6.num6.bs}","{$data_arr.7.num6.bs}","{$data_arr.8.num6.bs}","{$data_arr.9.num6.bs}","{$data_arr.10.num6.bs}","{$data_arr.11.num6.bs}","{$data_arr.12.num6.bs}","{$data_arr.13.num6.bs}","{$data_arr.14.num6.bs}"];   
            nums = [{$code.0.num6},{$code.1.num6},{$code.2.num6},{$code.3.num6},{$code.4.num6},{$code.5.num6},{$code.6.num6},{$code.7.num6},{$code.8.num6},{$code.9.num6},{$code.10.num6},{$code.11.num6},{$code.12.num6},{$code.13.num6},{$code.14.num6}];  
            datas = ["{$code.14.period}期","{$code.13.period}期","{$code.12.period}期","{$code.11.period}期","{$code.10.period}期","{$code.9.period}期","{$code.8.period}期","{$code.7.period}期","{$code.6.period}期","{$code.5.period}期","{$code.4.period}期","{$code.3.period}期","{$code.2.period}期","{$code.1.period}期","{$code.0.period}期"];  
            drawBorder();  
            drawLine();  
            drawBlock(bar_color6); 

            //画出坐标线  
            function drawBorder(){  
                //主坐标轴
                ctx.beginPath();  
                ctx.moveTo(50,50);  
                ctx.lineTo(50,50*proportion_y+50);  
                ctx.moveTo(50,50*proportion_y+50);  
                ctx.lineTo(num_x*proportion_x+50,50*proportion_y+50); 
                ctx.closePath();
                ctx.stroke();

                //其他坐标轴-y
                ctx.beginPath();
                for (i = 0;i < num_x;i ++){
                    ctx.strokeStyle="rgb(180, 178, 178)";
                    ctx.moveTo((i+1)*proportion_x+50,50); 
                    ctx.lineTo((i+1)*proportion_x+50,50*proportion_y+50);
                }
                ctx.closePath();
                ctx.stroke(); 
                //其他坐标轴-x
                ctx.beginPath();
                for (i = 0;i < 5;i ++){
                    ctx.strokeStyle="rgb(180, 178, 178)";
                    ctx.moveTo(50,50*proportion_y-i*50);  
                    ctx.lineTo(num_x*proportion_x+50,50*proportion_y-i*50); 
                }
                ctx.closePath();
                ctx.stroke(); 
            } 
             

            //画出折线  
            function drawLine(){  
                for (i = 0;i < nums.length-1;i ++){  
                    //起始坐标
                    var numsY = 300-nums[i]*proportion_y;  
                    var numsX = (i)*proportion_x+50+proportion_x/2;  
                    //终止坐标  
                    var numsNY = 300-nums[i+1]*proportion_y;  
                    var numsNX = (i+1)*proportion_x+50+proportion_x/2;  
                    ctx.beginPath();  
                    ctx.moveTo(numsX,numsY);  
                    ctx.lineTo(numsNX,numsNY);  
                    ctx.lineWidth = 1;  //画线粗细
                    ctx.strokeStyle ="rgb(36, 35, 35)"; //"#80aa33";  //颜色
                    ctx.closePath();  
                    ctx.stroke();  
                }  
            }  
            //绘制折线点的菱形和数值，横坐标值，纵坐标值  
            function drawBlock(bar_color_){  
                for (i = 0;i <= nums.length;i ++){  
                    var numsY = 300-nums[i]*proportion_y;  
                    var numsX = (i)*proportion_x+50+proportion_x/2;  
                    ctx.beginPath();  
                    // 画出折线上的圆
                    if(bar_color_[i]=="红波") {
                        ctx.fillStyle="red";
                    }
                    else if((bar_color_[i]=="绿波")){
                        ctx.fillStyle="green";
                    }
                    else{
                        ctx.fillStyle="blue";
                    }
                    ctx.beginPath();
                    ctx.arc(numsX,numsY,10,0,Math.PI*2,true); //ctx.arc(x,y,r,0,Math.PI*2,true);
                    ctx.closePath();
                    ctx.fill();
                    //折线上的点值  
                    var text = ctx.measureText(nums[i]);  
                    ctx.fillStyle="white";
                    ctx.fillText(nums[i],numsX-text.width/2,numsY+3);  
                    //绘制纵坐标
                    ctx.fillStyle="black";
                    if(i<(5+1)){
                        var colText = ctx.measureText((5-i)*10);  
                        ctx.fillText((5-i)*10,40-colText.width,i*50+55);
                    }
                    //绘制横坐标并判断  
                    if (i < num_x){  
                        var rowText = ctx.measureText(datas[i]);  
                        ctx.fillText(datas[i],numsX-rowText.width/2,320);  
                    }else if(i == num_x) {  
                        return;  
                    }  
                    ctx.closePath();  
                    ctx.stroke();  
                }  
            }   
    </script> 
    <script>

      var open_choose=document.getElementById("bnt_can");
      choose(open_choose);
      function choose(id) {
        id.style.backgroundColor="rgb(136, 255, 0)";
        var choosed=document.getElementById("choosed").innerHTML;
        if (choosed !="") {
          document.getElementById(choosed).style.backgroundColor="aqua"; 
          var hide_div=choosed.split("_")[1];
          document.getElementById(hide_div).style.display="none";
        }
        document.getElementById("choosed").innerHTML=id.id;
        var show_div=id.id.split("_")[1];
        document.getElementById(show_div).style.display="block";
      }

    </script> 
    <a href=""></a>
    </html> 